body {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background: url(../../assets/images/7.jpg) no-repeat;
	background-size: 100% 100%;
	main {
		height: 1px;
		flex-grow: 1;
		overflow-y: auto;
		section {
			margin-bottom: 20px;
		}

		// 用户名与个性签名
		.ui {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			align-items: center;
			width: 100%;
			height: 30%;
			background-color: rgba(0, 0, 0, 0.2);
			backdrop-filter: blur(5px);

			// 头像
			#hp {
				width: 100px;
				height: 100px;
				border: 2px solid #fff;
				border-radius: 50%;
				img {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}

			// 用户名
			.user {
				width: 200px;
				height: 100px;
				font-size: 25px;
				font-weight: bold;
				line-height: 60px;
				a {
					color: #f0f0f0;
				}
			}

			// 个性签名
			.idly {
				color: #fff;
				outline: none;
			}
		}

		// 运动数据
		.data {
			width: 100%;
			height: 23%;
			background-color: rgba(0, 0, 0, 0.2);
			backdrop-filter: blur(5px);
			border-radius: 25px;
			// 标题盒子
			.titlebox {
				display: flex;
				justify-content: space-around;
				width: 100%;
				height: 40px;
				line-height: 40px;

				// 标题与统计
				p {
					width: 292px;
					.icon-statistics {
						color: #61a6ff;
					}
					.title {
						font-size: 14px;
						font-weight: bold;
						color: #f0f0f0;
					}
				}

				// 详情链接
				#details {
					font-size: 25px;
					color: #fff;
				}
			}

			// 数据盒子
			.bigdata {
				display: flex;
				justify-content: space-around;
				width: 100%;
				height: 83px;
				color: #f0f0f0;

				// 总运动数据
				.sporttime {
					// width: 140px;
					height: 100%;

					// 标题
					.title1 {
						margin-bottom: 15px;
						font-size: 14px;
						font-weight: bold;
						color: #f0f0f0;
					}

					// 具体数据
					.num1 {
						font-size: 40px;
						color: #00ffff;
					}

					// 单位
					.time {
						font-size: 14px;
					}
				}

				// 分割线
				.division {
					width: 1px;
					height: 100%;
					background-color: #fff;
				}

				// 消耗数据
				.consume {
					width: 140px;
					height: 100%;

					// 标题
					.title2 {
						margin-bottom: 15px;
						font-size: 14px;
						font-weight: bold;
						color: #f0f0f0;
					}

					// 具体数据
					.num2 {
						font-size: 40px;
						color: #00ffff;
					}

					// 单位
					.kilocalorie {
						font-size: 14px;
					}
				}
			}
		}

		// 运动徽章
		.badge {
			width: 100%;
			height: 163px;
			background-color: rgba(0, 0, 0, 0.2);
			backdrop-filter: blur(5px);
			border-radius: 25px;

			// 标题盒子
			.titlebox2 {
				display: flex;
				justify-content: space-around;
				width: 100%;
				height: 40px;
				line-height: 40px;

				// 标题
				p {
					width: 292px;
					// 字体图标
					.icon-badge-full {
						color: #66b3ff;
					}

					.title3 {
						font-size: 14px;
						font-weight: bold;
						color: #f0f0f0;
					}
				}

				#particulars {
					font-size: 25px;
					color: #f0f0f0;
				}
			}

			// 徽章盒子
			.badgebox {
				display: flex;
				justify-content: space-around;
				width: 100%;
				height: 100px;

				// 具体徽章
				a {
					width: 100px;
					height: 100px;
					border: 2px solid #f0f0f0;
					border-radius: 50%;
					img {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}
			}
		}

		// 退出登录按钮
		.quit {
			width: 100%;
			height: 8%;

			button {
				width: 100%;
				height: 100%;
				outline: none;
				border: 0;
				background-color: rgba(0, 0, 0, 0.2);
				backdrop-filter: blur(5px);
				font-size: 25px;
				color: #00ffff;
				border-radius: 15px;
			}
		}
	}

	// 底部导航栏
	.tabber {
		background-color: rgba(0, 0, 0, 0.1);
		backdrop-filter: blur(5px);
		box-shadow: 0 0 0px;
		a {
			color: #fff;
		}
	}
}
